Getting Started with React – An Overview and Walkthrough – Tania Rascia
写経リポジトリ
必要な知識
ゴール
JSX, components, props, state, lifecycleが理解できる 上記概念を利用した単純なアプリがつくれる
Reactとは
JavaScriptのライブラリ。（Angularとは違って）フレームワークではない
フロントでUIを構築するのにつかわれる
MVCアプリケーションでいうところのViewレイヤ componentsは再利用できるHTML要素。効率的にUIを構築することができる
stateとpropsをつかってデータを保存したりハンドリングするのを合理的にやれる
ライブラリ
React：Reactのtop levelのAPI
React DOM：DOMに関連するメソッド
実践：Hello world
babelを使うときにはscript typeはtext/babelとする
render()が最低限必要。DOMノードを描画するのに使われる。ここで返すのはstringではなくJSX
React DOMのrender()メソッドで作成したコンポーネントをHTMLのdiv要素に結びつけ、描画をする
できた。こわくないでしょ。たんなるHTMLにロードしたJavaScriptのヘルパライブラリだ。
JavaScriptライブラリHTMLにロードして、BabelやReactをon the flyにレンダリングして…というのは非効率でメンテも難しい
Create React Appという、Reactのアプリを書くための環境が用意されてる
Webpackをつかって動的にReact, JSX, ES6, CSSをコンパイルするし、Linterもついてる
npxコマンドでローカルパッケージをうごかしていく yarnだとyarn runで実行できるが、npxのようにパッケージのダウンロードはしてくれない
React Dev Toolのブラウザ拡張を入れるとこーどが複雑になったときに便利
componentのrender()の中に出てくるHTMLみたいなやつのこと
code:js
render() {
return (
<div className="App">
<h1>Hello, React!</h1>
</div>
);
}
JavaScript XMLの略
ReactではJSXが文法上は必須ではない
これらは等価（上：JSX、下：JSXを利用しない）
code:jsx
const heading = <h1 className="site-heading">Hello, React</h1>;
code:js
const heading = React.createElement(
'h1',
{className: 'site-heading'},
'Hello, React!'
);
JSXはHTMLよりJSに近い
classはJSの予約語なので、CSSのclassにはclassNameを使う
プロパティやメソッドはcamelCaseを使う
self-closingタグは/でおわらなければならない（例：<img />）
JSX中で{}を使うとこの中でJSが呼べる
Reactは小さな多数のコンポーネントから構成されている
コンポーネントには2種類ある
class components
React.Componentsを継承して作る
render()が必要
simple components
fucntion
コンポーネントごとに1つのファイルに分けられている（わけなくてもいいが、手に負えなくなる）
componentは混ぜて使うことができる
componentは他のコンポーネントをネストできる
return()はたった一つの親要素のみ返すことができる
Reactのよいところの一つはデータの扱い方
プロパティ（props）とstateを使って扱っていく
propsはリードオンリー
/kadoyau/kadoyau.icon疑問
propsのスコープは？
リードオンリーなpropsの値を変更したいときに使う
Submitting Form Data
ここまででreadとdeleteはできるようになった。じゃあaddはどうするの？
ゴール：Formから入力したデータをAppに渡して、Tableが更新されるようにする
Pulling in API Data
Lifecycle methodのcomponentDidMount()
ライフサイクルはメソッドが呼ばれる順番
MountingはDOMに挿入されたアイテムのこと
データを送る前にDOMがレンダリングされていてほしい
例に関する全体的な疑問kadoyau.icon
子のコンポーネントが親のstateのメソッドの詳細について知っているのはReactの作法？
Reactの型定義記法PropTypesを使うとインタフェースが切れる